<template>
  <div class="logo-component" :class="{ collapsed: isCollapsed }">
    <div class="logo-icon">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <!-- 字母L的变形，结合鹿角元素 -->
        <g>
          <!-- 主体L形状 -->
          <path
            d="M 25 20 L 25 80 L 65 80 L 65 70 L 35 70 L 35 20 Z"
            fill="currentColor"
            class="letter-l"
          />
          <!-- 鹿角装饰 -->
          <path
            d="M 30 25 Q 28 18 25 15 M 30 25 Q 32 18 35 15 M 30 25 Q 30 15 30 10"
            stroke="currentColor"
            stroke-width="2.5"
            fill="none"
            class="antler"
          />
        </g>
      </svg>
    </div>
    <transition name="fade">
      <span v-if="!isCollapsed" class="logo-text">鹿鸣后台</span>
    </transition>
  </div>
</template>

<script setup lang="ts">
interface Props {
  isCollapsed?: boolean
}

withDefaults(defineProps<Props>(), {
  isCollapsed: false,
})
</script>

<style scoped>
.logo-component {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.logo-icon {
  width: 36px;
  height: 36px;
  color: #fff;
  transition: transform 0.3s;
}

.logo-icon:hover {
  transform: scale(1.1);
}

.logo-icon svg {
  width: 100%;
  height: 100%;
}

.letter-l {
  transition: all 0.3s;
}

.antler {
  transition: all 0.3s;
  stroke-linecap: round;
}

.logo-component:hover .letter-l {
  fill: #1890ff;
}

.logo-component:hover .antler {
  stroke: #1890ff;
}

.logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
}

.logo-component.collapsed {
  padding: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
